<template>
	<view>
		<view class="flex align-center justify-between padding-y-16 padding-x-30">
			<view  @click="goBack()">
				<image src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;margin: 0 auto;"></image>
			</view>
			<view class="radius60 flex1 margin-x-30 padding-x-30 flex align-center" style="background: rgba(102, 102, 102, 0.08);">
				<image src="../../static/img/srh_6.png" style="width: 40rpx;height: 40rpx;"></image>
				<input type="text" class="fs-26 color-fff margin-left-20 ipt flex1" placeholder="请输入">
			</view>
			<view>
				<image src="../../static/img/msg_6.png"  style="width: 46rpx;height: 46rpx;"></image>
			</view>
		</view>
		<!-- 分类 -->
		<view class="padding-20 bg-f7f7f7">
			<view class="flex align-center  flex-wrap bg-fff padding-top-24 padding-bottom-16">
				<view @click="jump('/pages/huisuo/huisuo_two')" class="w20 text-center margin-bottom-24">
					<image src="../../static/img/hs_icon1.png" class="index_icon"></image>
					<view class="fs-24 color-333">会所</view>
				</view>
				<view  @click="jump('/pages/huisuo/huisuo_two')" class="w20 text-center margin-bottom-24">
					<image src="../../static/img/hs_icon2.png" class="index_icon"></image>
					<view class="fs-24 color-333">茶楼</view>
				</view>
			</view>
		</view>
		<!-- 分类end -->
		<view class="relative">
			<view class="padding-y-24 flex align-center justify-between">
				<view @click="flag = true" class="flex align-center flex1 justify-center">
					<text class="fs-28 color-999 margin-right-10">{{sortArr[sortIndex] || '全部'}}</text>
					<image src="../../static/img/down.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view class="flex align-center flex1 justify-center">
					<text class="fs-28 color-999 margin-right-10">附近</text>
					<image src="../../static/img/down.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view @click="filter = true" class="flex align-center flex1 justify-center">
					<text class="fs-28 color-999 margin-right-10">筛选</text>
					<image src="../../static/img/filter.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<!-- 推荐、销量切换 -->
			<view class="absolute sortCon w100" v-if="flag">
				<view v-for="(item,index) in sortArr" :key='index' class="fs-26  padding-y-24 solid-bottom bg-fff  padding-x-24" :class="sortIndex == index ? 'color-zhuse' : 'color-333'" @click="changeSort(index)">{{item}}</view>
			</view>
		</view>
		
		<view class="clearfix  margin-top-10 padding-x-10">
			<!-- 商家列表 -->
			<view @click="jump('/pages/canyin/detail')"  class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" src="../../static/img/img.jpg" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">MOMOHAONEY嬷嬷哈尼（华强广场店）</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">4.5分</text> | 月售1239</view>
							<view class="color-fuse">500m</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="jump('/pages/canyin/detail')"  class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" src="../../static/img/img.jpg" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">MOMOHAONEY嬷嬷哈尼（华强广场店）</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">4.5分</text> | 月售1239</view>
							<view class="color-fuse">500m</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="jump('/pages/canyin/detail')"  class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" src="../../static/img/img.jpg" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">MOMOHAONEY嬷嬷哈尼（华强广场店）</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">4.5分</text> | 月售1239</view>
							<view class="color-fuse">500m</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商家列表 end -->
		</view>
		
		
		<!-- 筛选 -->
		<view v-if="filter" class="fixed filterCon bg-fff padding-x-20 padding-y-30 flex align-center justify-between flex-direction">
			<view class="flex align-center w100">
				<image  @click="filter = false" src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;"></image>
				<view class="fs-30 color-333 flex1 text-center">筛选</view>
			</view>
			<view class="flex1 w100 margin-y-40">
				<view class="fs-28 color-333 ">类别</view>
				<view class="margin-top-24 flex align-center  flex-wrap">
					<view class="nav_item fs-26 color-333 margin-right-24 on margin-bottom-24">会所茶楼</view>
					<view class="nav_item fs-26 color-333 margin-right-24 margin-bottom-24">会所茶楼</view>
				</view>
			</view>
			<view class="flex align-center justify-center">
				<view  @click="filter = false" class="fs-30 color-zhuse bg-fff text-center btn1">重置</view>
				<view  @click="filter = false" class="fs-30 color-fff bg-zhuse text-center btn2">筛选</view>
			</view>
		</view>
		<!-- 筛选end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:false,
				sortArr:['推荐排名','星级评价排名','距离优先','销量排名'],
				sortIndex:-1,
				filter:false
			}
		},
		methods:{
			changeSort(index){
				this.sortIndex = index;
				this.flag = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt{height: 70rpx;}
	.index_icon{width: 76rpx;height: 76rpx;}
	.sortCon{
		top: 70rpx;
		background: rgba(0,0,0,0.4);
		height: 100vh;
		z-index: 9;
	}
	.filterCon{width: 100%;height: 100vh;top: 0;left: 0;}
	.nav_item{background: rgba(153, 153, 153, 0.1);height: 60rpx;line-height: 60rpx; padding: 0 30rpx;border-radius: 60rpx;}
	.nav_item.on{background: rgba(255, 147, 46, 0.08);color: #FF932E;border: 1rpx solid #FF932E;}
	.btn1{width: 300rpx;height: 82rpx;line-height: 82rpx;border: 1rpx solid #FF932E;}
	.btn2{width: 300rpx;height: 82rpx;line-height: 82rpx;border: 1rpx solid #FF932E;}
</style>
